import React, {Component, PropTypes} from 'react';

import Container from '../container/Container.react';
import Section from '../section/Section.react';
import translate from '../../../i10n/translate';

export class QRCode extends Component {

    static propTypes = {
        qrcode: PropTypes.string.isRequired
    };

    static defaultProps = {
        qrcode: 'images/qrcode.jpg'
    };

    render(){
        return <div className="qrcode">
            <img src={this.props.qrcode}/>
        </div>;
    }
}


export class Contacts extends Component {
    static propTypes = {
        contacts: PropTypes.array.isRequired
    };

    static defaultProps = {
        contacts: [
            translate('contacts.qq'),
            translate('contacts.wechat'),
            translate('contacts.phone'),
            translate('contacts.discuz')
        ]
    };

    get contactListItems() {
        return this.props.contacts.map((item, index) => {
            return <li key={index}>
                {item}
            </li>;
        });
    }

    render() {
         return <ul className="contacts">
             {this.contactListItems}
         </ul>;
    }
}

export class CopyRight extends Component {

    static propTypes = {
        copyRight: PropTypes.string.isRequired
    };

    static defaultProps = {
        copyRight: translate('copyRight')
    }

    render() {
        return <p className="copyRight">{this.props.copyRight}</p>;
    }
}

export default class Footer extends Component {

    render() {
        return <Section autoHeight={true} className="footer">
            <Container>
                <QRCode/>
                <Contacts/>
                <CopyRight />
            </Container>
        </Section>;
    }
}